<!--
 * @Descripttion: 车辆在离线详情
 * @version: 
 * @Author: ada.wu
 * @Date: 2025-06-25 23:48:14
 * @LastEditors: ada.wu
 * @LastEditTime: 2025-07-09 23:24:12
-->
<!-- css/amap.css -->

<head>

    <link rel="stylesheet" href="/assets/css/amap.css" media="all">
</head>
<style>
    /* .layui-table td[colspan] {
    width: auto !important;
    max-width: none !important;
} */
    .progress-bar-container {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
    }

    .hour-slot {
        width: 30px;
        height: 20px;
        margin-right: 2px;
        text-align: center;
        line-height: 20px;
        font-size: 12px;
        color: #fff;
        background-color: #ccc;
        border-radius: 2px;
    }

    .hour-slot.active-hour {
        background-color: #4caf50;
        /* 在线 */
    }

    .hour-slot.inactive-hour {
        background-color: #f44336;
        /* 离线 */
    }

    .layui-card-header {
        border-bottom: none;
    }

    .layui-card.selected {
        background-color: var(--primary-hover-color) !important;
    }

    .layui-card.selected.solid::after {
        border-color: var(--primary-color) !important;
        ;

    }

    #grid-card {
        height: calc(100vh - 425px);
    }

    .total-map {
        height: calc(100vh - 355px);
    }

    .tab-cont {
        position: relative
    }

    .tab-time {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
        width: 260px;
    }
</style>
<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">
        <div class="title-row layuimini-title ">
            <div class="title-left">
                <h4>
                    <i class="layui-icon layui-icon-return anticon mr-1" id="backBtn"></i>
                    车辆在离线详情
                </h4>
            </div>
            <div class="title-right">
                <span class="layui-font-gray">（2025-06-30—2025-06-30）</span>
            </div>
        </div>


        <div class="section">
            <div class="layui-row  mb-5 layui-bg-gray">
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 mt-3 pl-4">
                    <label class="layui-font-black">京AWD510</label>
                    <span class="layui-font-gray">--</span>
                </div>
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 mt-3  pl-4">
                    <label class="layui-font-gray">在线率：</label>
                    <span class="layui-font-black">100%</span>
                    <span class="layui-font-gray">（1/1）</span>
                </div>
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 mt-3  pl-4">
                    <label class="layui-font-gray">在线时长：</label>
                    <span class="layui-font-black">5.47</span>
                    <span class="layui-font-gray">小时</span>
                </div>
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 mt-3  pl-4">
                    <label class="layui-font-gray">总行驶里程：</label>
                    <span class="layui-font-black">35.3</span>
                    <span class="layui-font-gray">公里</span>
                </div>
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 mt-3  pl-4">
                    <label class="layui-font-gray">所属项目：</label>
                    <span class="layui-font-black">北京海淀上地街道项目</span>
                </div>
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 mt-3  pl-4">
                    <label class="layui-font-gray">业务类型：</label>
                    <span class="layui-font-black">--</span>
                </div>
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 mt-3  pl-4">
                    <label class="layui-font-gray">所属组织：</label>
                    <span class="layui-font-black">海淀环境工程服务有限公司</span>
                </div>
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 mt-3  pl-4">
                    <label class="layui-font-gray">关联网格：</label>
                    <span class="layui-font-black">--</span>
                </div>
            </div>

            <div class="layuimini-title px-0 noborder">
                <div class="flex items-center justify-between">
                    <div>
                        <div class="title-row pb-0">
                            <div class="title-info">
                                <div class="title-line"></div>
                                <span class="title-text font-weight">每日在线数据</span>
                            </div>
                        </div>
                    </div>
                    <input type="text" name="datePeriodStart" autocomplete="off" id="date_period"
                        class="layui-input date-input ml-3" placeholder="请选择" />
                </div>
            </div>


            <div class="table-stripe">
                <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
            </div>
            <script type="text/html" id="currentTableBar">
            <a class="layui-font-blue mr-3" lay-event="detail">轨迹</a>
        </script>
        </div>
    </div>
</div>

<script>



    layui.use(['form', 'miniPage', 'miniAMap'], function () {
        var $ = layui.$,
            element = layui.element,
            layer = layui.layer,
            util = layui.util,
            table = layui.table,
            tabs = layui.tabs,
            laydate = layui.laydate,
            miniAMap = layui.miniAMap;



        // 获取存储的数据
        var appData = layui.sessionData('CAR_WORK_OFFLINE_PARAMS')
        let { dataDto = null, pageType = '' } = appData
        if (dataDto) {
            dataDto = JSON.parse(dataDto)
        }
        console.log('pageType==', pageType)
        $("#pageTitle").html(pageType == 'edit' ? '编辑出勤范围' : '新增出勤范围')
        console.log('子页面的值===', pageType, dataDto)
        // 起始日期
        laydate.render({
            elem: '#date_period',
            range: true
        });


        /******************** 事件 start ********************/
        // 地图页面返回事件
        $('#backBtn').on('click', function () {
            miniPage.backPageCreate()
        });
        /******************** 事件 end ********************/

        tabs.render({
            elem: '#planTabs',
            index: 0// 默认选中
        });


        // planTabs 切换事件
        tabs.on('afterChange(planTabs)', function (data) {
            var tabIndex = data.index;
        });

        let timeCols = []
        for (let i = 0; i < 24; i++) {
            let colsParam = {
                field: 'time' + i,
                title: i + '点',
                width: 100,

                align: 'center',
                templet: function (d) {
                    return '<div class="inline-block radius">' + d.time + '</div>'
                }
            }
            // 合并第一列，跨23列
            if (i === 0) {
                colsParam.rowspan = 23;
            }

            timeCols.push(colsParam)
        }
        console.log('timeCols===', timeCols)


        table.render({
            elem: '#currentTableId',
            url: 'api/table.json',
            cols: [[
                { field: 'name', minWidth: 110, title: '日期' },
                { field: 'name', minWidth: 120, title: '在线时间' },
                { field: 'name', minWidth: 120, title: '首次在线时间' },
                { field: 'name', minWidth: 120, title: '最后在线时间' },
                { field: 'name', minWidth: 120, title: '行驶时间' },
                { field: 'name', minWidth: 120, title: '时长（h）' },
                
                ...timeCols,
                    {field: 'field5', title: '合并列', colspan: 3}, // 假设后面还有3列

                { title: '操作', minWidth: 100, toolbar: '#currentTableBar', fixed: 'right', align: "center" }
            ]],
            done: function (res, curr, count, origin) {
                // merge(res)
                console.log('res====', res); // 得到当前渲染的数据
                console.log('curr====', curr);  // 得到当前页码
                console.log('count====', count); // 得到数据总量
                console.log('origin====', origin); // 回调函数所执行的来源 --- 2.8.7+

            },
            limits: [10, 15, 20, 25, 50, 100],
            limit: 10,
            page: true,
            skin: 'grid',
            size: 'lg'
        });
        function merge(res) {
            var trArr = $(".layui-table-body>.layui-table").find("tr");

            // 假设 time0 是第7列（索引6），共24列
            var startColIndex = 6;
            var totalCols = 24;

            trArr.each(function (i) {
                var $row = $(this);

                // 设置 time0 列 colspan=24
                var $firstTd = $row.find("td").eq(startColIndex);
                if ($firstTd.length > 0) {
                    $firstTd.attr("colspan", totalCols).css(
                        { 
                        textAlign: "center", 
                        fontWeight: "bold" 
                    }
                );
                }

                // 隐藏 time1 ~ time23 的 td
                for (var k = 1; k < totalCols; k++) {
                    var $td = $row.find("td").eq(startColIndex + k);
                    if ($td.length > 0) {
                        $td.hide();
                    }
                }
            });

            //  添加这一行来刷新表格布局
            table.resize('currentTableId'); // currentTableId 是你的表格 ID
        }
    })
</script>